<div class="addgallerysection">

    <legend>Add New Gallery</legend>
    <form  method="post" id="add-gallery" action="../AddGalleryImagesServlet" onSubmit="" enctype="multipart/form-data">

        <div class="span4">

            <p>
                <label for="">Gallery Name</label>
                <input type="text" required name="gallery-name" class="input-xlarge" placeholder="Enter name of Gallery">
            </p>

            <!--  <p>
                  <label>Select Gallery Image</label>
                  <input type="button" onClick="callfile()" class="btn pull-right" value="Add More">
                  <input type="file" id="" name="gallery-image" required class="input-xxlarge">
              </p>-->


            <div id="imagegroup"> 
                <input type="hidden" value="0" name="theValue1" id="theValue1" />

                <p id="imageblock1"> 

                    <input id="imgpath_1" name="imgpath_1" class="hidden-file" type="file" >                               
                    <label for="image_1">Select Image 1:</label>
                    <input id="image_1" name="image_1" class="span2" type="text" onclick="callfile(id)" readonly>
                    <input type="button" class="btn btn-primary" id="imagebutton_1" onclick="callfile(id)" value="Browse">	
                </p>
            </div>


        </div>

        <div class="span5 offset2">

            <p>
                <label for="" >Select Gallery Type</label>
            <div id="addgalleryselectgallerytype">
                <!-- <select name="" class="input-large" id="addgalleryselectgallerytype">
                     <option selected>Select </option>
                     <option value="" >Room Gallery</option>
                     <option value="" >Event Gallery</option>
                     <option value="" >Resort Gallery</option>
                 </select>-->
            </div>
            </p>



        </div>

        <div class="clearfix"></div>

        <div class="dynamic" id="dynamic-image">


        </div>

        <div class="clearfix"></div>

        <p>

        <p>

            <button class="btn btn-primary btn-modify-1" name="addimage" id="addimage" onClick="return addImage();">Add Image</button>
            <button class="btn btn-danger" name="removeimage" id="removeimage" onClick="return removeImage();">Remove Image</button>
        </p>
        <input class="btn btn-primary btn-modify" type="submit" name="submit" value="upload Images">
        </p>



        <!--  <div class="span11">
              <br>
              <p>
                  <input type="submit" class="btn btn-primary btn-large" value="Save" name="submit">
              </p>
              <p>
                  <label class="text-success"> Display the "succesfully saved" message here </label>
              </p>
          </div>-->

        <div class="clearfix"></div>

    </form>

</div>



<hr>

<footer>
    <p>&copy; The Prime Resort, 2012</p>
</footer>

</div> <!-- /container -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>

<script src="js/vendor/bootstrap.min.js"></script>

<script src="js/jquery.validate.min.js"></script>

<script src="js/main.js"></script>

<script type="text/javascript">
		
		
    $(document).ready(function() { 
			 	 
        // form validation
        $("#add-gallery").validate();
        $("#add-gallery-type").validate();
				 
    });
		
			
    /*function add_input(){ // dynamic file input box generation script for gallery image upload 
						
        if(!this.counter)this.counter = 0; //member variable to serve as static variable
        this.counter++; // counter will be increamented everytime the function is called and the every new file input will get a unique name
			
        var div_id = document.getElementById('dynamic-image');
				
        var link = document.createElement('div'); //creating new DIV under dynamic-image DIV
        link.setAttribute('class', 'alert fade alert-info in file-box span2');
        link.innerHTML= "<button data-dismiss='alert' class='close' type='button'>×</button><input type='file' class='input-large' name='gallery-image"+this.counter+"' required>";
        div_id.appendChild(link);
        
        
			
    }*/
    
    function addImage()
    {
				
        var ni = document.getElementById('imagegroup');				
        var numi = document.getElementById('theValue1');		
        var num = (document.getElementById('theValue1').value -1)+ 2;				
        numi.value = num;
        num++;			
        var newdiv = document.createElement('p');				
        var divIdName = "imageblock"+num ;				
        newdiv.setAttribute('id',divIdName);
        newdiv.innerHTML = "<input id=\"imgpath_"+num+"\" name=\"imgpath_"+num+"\" class=\"hidden-file\" type=\"file\" > <label for=\"image_"+num+"\">Select Image "+num+" :</label> <input id=\"image_"+num+"\" name=\"image_"+num+"\" class=\"span2\" type=\"text\" onclick=\"callfile(id)\" readonly> <input type=\"button\" class=\"btn btn-primary\" id=\"imagebutton_"+num+"\" onclick=\"callfile(id)\" value=\"Browse\">";			
				
        ni.appendChild(newdiv);
        return false;
    }
			
    function removeImage()
    {
        var ni = document.getElementById('imagegroup');				
        var numi = document.getElementById('theValue1');		
        var num = (document.getElementById('theValue1').value -1)+ 2;
        if((num-2)==-1)
            return false;
        numi.value = num-2;								
        var divIdName = "imageblock"+num ;
        var olddiv = document.getElementById(divIdName);
        ni.removeChild(olddiv);
        return false;
    }
    
    function callfile(id)
    {
        //var amount = parseInt(/amount-(\d+)/.exec(id)[1], 10);
        //var direction = /direction-([^\s]+)/.exec(id)[1];
        var id2=parseInt( id.split('_')[1] );
        //alert(id2);
        var id1="input[id=imgpath_"+id2+"]";
        $(id1).click();
    }
		
</script>

<script type="text/javascript">
    $('input[id^=imgpath]').live("change",function() 
    {
        var filepath = $(this).parent().find("input[type='text']");
        filepath.val($(this).val());
        //console.log($(this).attr("id"));				
    });
    $()
    {
        $("#theValue1").val(0);
    }
</script>
